<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--仓库数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="tabName"
            placeholder="请输入组织名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 10px"
          />
        </div>
        <div class="addFolder" @click="handleAdd('1')">创建文件夹</div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span :title="node.label" class="show-ellipsis">
                 <i v-if="data.pid == -1">
                   <img src="@/assets/images/wjj.png" style="height:18px">
                 </i>
                  <i v-else>
                    <img src="@/assets/images/wj.png" style="height:17px">
                  </i>
                  {{ node.label }}
                </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              :disabled="addBtn"
              @click="handleAdd('2')"
            >新增仓库</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
            >修改仓库</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="single"
              @click="handleDelete"
            >删除仓库</el-button>
          </el-col>
        </el-row>

        <div class="infoTitle">
          基本信息
        </div>
        <div style="margin-top: 18px">
          <el-form  :model="form"  label-width="80px" >
            <el-row >
              <el-col :span="6" v-if="isFile1">
                <el-form-item label="父名称" prop="fname">
                  <el-input v-model="form.fname" :disabled="true"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="名称" prop="tabName">
                  <el-input v-model="form.tabName" :disabled="true"/>
                </el-form-item>
              </el-col>
              <el-col :span="6" v-if="isFile1">
                <el-form-item label="编号" prop="tabNameEn">
                  <el-input v-model="form.tabNameEn" :disabled="true"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div class="infoTitle"
             v-if="showTable">
          字段信息预览
        </div>
        <filed-mange ref="filedMange"
                     v-if="showTable">
        </filed-mange>


      </el-col>
    </el-row>


    <!-- 创建文件夹 -->
    <el-dialog :title="folderTitle" :visible.sync="folderOpen" width="450px" append-to-body>
      <el-form ref="folderForm" :model="folderForm" :rules="folderRules" label-width="80px" >
        <el-row v-if="isFile">
          <el-col :span="22">
            <el-form-item label="父名称" prop="fname">
              <el-input v-model="folderForm.fname" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="表名称" prop="tabName">
              <el-input v-model="folderForm.tabName" placeholder="请输入数据表名称" />
            </el-form-item>
          </el-col>
        </el-row>
<!--        <el-row v-if="isFile">-->
<!--          <el-col :span="22">-->
<!--            <el-form-item label="表编号" prop="tabNameEn">-->
<!--              <el-input v-model="folderForm.tabNameEn" placeholder="请输入数据表编号" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel('1')">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getDatabase,updateDatabase,getTree,addDatabase,delDatabase} from "@/api/manage/database";
  import filedMange from "./fieldmanage";

  export default {
    name: "databaseset",
    components: {
      filedMange
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 非单个禁用
        single: true,
        addBtn: true,
        // 非多个禁用
        multiple: true,
        // 弹出层标题
        folderTitle: "",
        // 是否显示弹出层
        folderOpen: false,
        // 表单参数
        form: {
          tabNameEn:null,
          tabName:null,
          fname:null
        },
        folderForm: {},
        // 表单校验
        folderRules: {
          tabName: [{ required: true, message: "名称不能为空", trigger: "blur" }]
          // tabNameEn: [{ required: true, message: "编号不能为空", trigger: "blur" }]
        },
        // 数据仓名称
        tabName: undefined,
        // 组织树选项
        deptOptions: undefined,
        defaultProps: {
          children: "children",
          label: "label"
        },
        currentData: {},
        showTable:false,
        isFile:false,
        isFile1:false,
        isLeaf:false,
      };
    },
    watch: {
      // 根据名称筛选组织树
      tabName(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      this.getTree();
    },
    methods: {

      /** 查询下拉树 */
      getTree() {
        getTree().then(response => {
          this.deptOptions = response.data;
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data,node) {
        this.currentData = data;
        this.isLeaf = node.isLeaf
        this.form.tabName = data.label
        this.single = false
        // 文件夹
        if(data.pid == -1){
          this.addBtn = false
          this.isFile1 = false
          this.showTable = false
        }else{
          this.addBtn = true
          this.isFile1 = true
          this.form.tabNameEn = data.tabNameEn
          this.form.fname = node.parent.data.label
          this.showTable = true
          this.$nextTick(() => {
            this.$refs.filedMange.getList(data.tabNameEn)
          })
        }
        //this.getList();
      },

      // 取消按钮
      cancel(e) {
        if(e == 1){
          this.folderOpen = false;
          this.reset(e);
        }else {

        }
      },

      // 表单重置
      reset(e) {
        if(e == 1 || e == 2){
          this.folderForm = {}
          this.resetForm("folderForm");
        }
      },

      /** 新增按钮操作 */
      handleAdd(e) {
        this.reset(e);
        if(e == 1){
          this.folderOpen = true
          this.folderTitle = "新增文件夹";
          this.isFile = false
        } else if(e == 2){
          this.folderForm.fname = this.currentData.label
          this.folderForm.pid = this.currentData.id
          this.folderOpen = true;
          this.folderTitle = "新增仓库";
          this.isFile = true
        }else {

        }
      },

      /** 提交按钮 */
      submitForm() {
        this.$refs["folderForm"].validate(valid => {
          if (valid) {
            if (this.folderForm.id != null) {
              updateDatabase(this.folderForm).then(() => {
                this.msgSuccess("修改成功");
                this.folderOpen = false;
                this.getTree();
              });
            } else {
              addDatabase(this.folderForm).then(res => {
                if(res.data){
                  this.msgSuccess("新增成功");
                }else {
                  this.msgError("该数据仓库已存在!");
                  return
                }
                this.folderOpen = false;
                this.getTree();
              });
            }
          }
        });
      },
      handleUpdate(){
        this.folderForm = {
          fname:this.form.fname,
          id:this.currentData.id,
          tabName:this.currentData.label
        }
        this.folderOpen = true;
        this.folderTitle = "修改仓库信息";
        // 文件夹
        if(this.currentData.pid == -1){
          this.isFile = false
        }else {
          this.isFile = true
        }
      },
      /** 删除按钮操作 */
      handleDelete() {
        if(!this.isLeaf){
          this.msgError("请先删除子节点!");
          return
        }
        const id = this.currentData.id
        this.$confirm('是否确认删除编号为"' + id + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delDatabase(id);
        }).then(() => {
          this.getTree();
          this.msgSuccess("删除成功");
        })
      },
    }
  };
</script>
<style scoped>

  .addFolder {
    height: 30px;
    background-color: #f1f2f9;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
  }

  .infoTitle {
    height: 36px;
    background-color: #f9f9f9;
    padding-left: 23px;
    line-height: 36px;
    color: #333;
    font-size: 14px;
    margin-bottom: 18px;
  }

</style>
